import React, { memo, useEffect, useState } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, Modal } from 'antd';
import { json, useNavigate } from 'react-router-dom';
import { login, sendCaptcha,forgetPwd } from '../../../../api/login';
import { useDispatch, useSelector } from 'react-redux';
import './login.css'
import { user } from '../../../../store/user/actionCreators';
const codelogin = memo((props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const navigate = useNavigate()
  const [loadings, setLoadings] = useState(false);
  const [disabled, setDisabled] = useState(false)
  const [loadingsa, setLoadingsa] = useState(false);
  const [disableda, setDisableda] = useState(false)
  const [v, setValues] = useState('')
  const [vala, setVala] = useState('')
  const [valb, setValb] = useState('')
  const [valc, setValc] = useState('')
  const dispatch = useDispatch()

  const [isShow, setIsShow] = useState(false)

  const [messageApi, contextHolder] = message.useMessage();

  //登录
  const onFinish = (values) => {
    console.log(values);
    login(values).then(res => {
      if (!res.data.success) {
        messageApi.error(res.data.errorMessage)
      } else {
        console.log('验证码',res);
        // console.log('验证码登录',res.data.result);
        localStorage.setItem('userInfo',JSON.stringify(res.data.result));
        // let userinfo = JSON.parse(JSON.stringify(res.data.result))
        // console.log(userinfo);
        messageApi.info('登录成功');
        navigate('/home')
        dispatch(user(res.data.result))
      }

    })
  };
  //忘记密码
  const onFinisha = (values) => {
    console.log('表单对象',values)
    forgetPwd(values).then(res=>{
      console.log('打印修改密码后的东东',res)
      messageApi.info('修改成功');
      setIsModalOpen(false)
    }).catch(err=>{
      messageApi.error(err)
    })
  };
  const onEmail = () => {
    navigate('/login/email')
  }
  const onPhone = () => {
    navigate('/login/phone')
  }
  //获取验证码
  const getCoder = () => {
    sendCaptcha(v).then((res) => {
      if (!res.data.success) {
        messageApi.error(res.data.errorMessage)
      } else {
        messageApi.info('验证码已发送');
      }
      setLoadings(false)
      setDisabled(false)
    }).catch(err => {
      setLoadings(false)
      setDisabled(false)
    })
  }
  //忘记密码获取验证码
  const getCodera = () => {
    sendCaptcha(vala).then((res) => {
      if (!res.data.success) {
        messageApi.error(res.data.errorMessage)
      } else {
        messageApi.info('验证码已发送');
      }
      setLoadingsa(false)
      setDisableda(false)
    }).catch(err => {
      setLoadingsa(false)
      setDisableda(false)
    })
  }
  const handleChange = (v) => {
    setValues(v.target.value)
  }
  const handleChangea = (v) => {
    setVala(v.target.value)
  }
  const handleChangeb = (v) => {
    setValb(v.target.value)
  }
  const handleChangec = (v) => {
    setValc(v.target.value)
  }
  const handleOk = () => {
    let obj={
      account:vala,
      captcha:valb,
      password:valc
    }
    console.log(obj)
    setIsModalOpen(false);
  };
  const handleCancel = () => {

    setIsModalOpen(false);
  };
  const showModal = () => {
    setIsModalOpen(true);
  }
  return (
    <div>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}

        size='large'
        onFinish={onFinish}
      >
        {contextHolder}
        <Form.Item
          name="account"
          rules={[
            {
              required: true,
              message: '请输入手机号！',
            },
          ]}
        >
          <Input value={v} onChange={(value) => handleChange(value)} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          name="certificate"
          rules={[
            {
              required: true,
              message: `请输入${isShow ? '密码' : '验证码!'}`,
            },
          ]}
        >
          <div style={{ display: 'flex', gap: '5px' }}>
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="code"
              placeholder={`请输入${isShow ? '密码' : '验证码!'}`}
            />
            {
              isShow ? '' : <Button disabled={disabled} loading={loadings} onClick={() => getCoder()} type='primary'>获取验证码</Button>
            }
          </div>
        </Form.Item>
        <div style={{ display: 'flex', gap: '10px', marginBottom: '10px' }}>
          <span onClick={() => onPhone()} style={{ cursor: 'pointer', color: '#1677ff' }}>{`${isShow ? '验证码登录' : '密码登录'}`}</span>
          {/* <span onClick={() => onEmail()} style={{cursor:'pointer',color:'#1677ff'}}>邮箱登录</span> */}
          <span style={{ cursor: 'pointer', color: 'blue' }} onClick={showModal}>忘记密码</span>
        </div>
        <Form.Item>
          <Button block type="primary" htmlType="submit" className="login-form-button">
            登 录
          </Button>
        </Form.Item>
      </Form>
      <Modal title="忘记密码" cancelText='取消' okText='关闭' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="forgetName"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          size='large'
          onFinish={onFinisha}
        >
          {contextHolder}
          <Form.Item
            name="account"
            rules={[
              {
                required: true,
                message: '请输入手机号！',
              },
            ]}
          >
            <Input value={vala} onChange={(value) => handleChangea(value)} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="captcha"
            rules={[
              {
                required: true,
                message: `请输入${isShow ? '密码' : '验证码!'}`,
              },
            ]}
          >
            <div style={{ display: 'flex', gap: '5px' }}>
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="code"
                value={valb}
                onChange={(value) => handleChangeb(value)}
                placeholder={`请输入${isShow ? '密码' : '验证码!'}`}
              />
              {
                isShow ? '' : <Button disabled={disableda} loading={loadingsa} onClick={() => getCodera()} type='primary'>获取验证码</Button>
              }
            </div>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入新密码！',
              },
            ]}
          >
            <Input value={valc} onChange={(value) => handleChangec(value)} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入新密码" />
          </Form.Item>
          <Form.Item>
            <Button block type="primary" htmlType="submit" className="login-form-button">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>

  );
})

export default codelogin

